<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/static/css/web/theme/ink.css?v=2"/>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/css-doodle.min.js"></script>
    <style>
        html,body{width:100%; height:100%; padding:0px; margin:0px; background: silver;}
        /*background:linear-gradient(to left top, silver,black);*/
        .login-page-image{width:100%; height:100%; opacity:0.8; position: absolute;
            top: 0px; transition: all 1s ease; z-index:1;}
        .website-name{    position: fixed;font-size: 60px;top: 250px;left: 250px; transition: all 2s ease; color:#298fb98a;}
        .website-name:hover{left:230px;color:#0a5d80;}
        .form-login{
            width: 300px;
            position: fixed;
            z-index: 2;
            top: 250px;
            right: 100px;
            background: #87ceeb36;
            padding: 10px;
            box-sizing: border-box;
            border:1px solid #eee;
            transition: all 1s ease;
        input[type="text"],input[type="password"]{
            height:30px;
            line-height: 30px;
            width:100%;
        }
        }
        .form-login:hover{ background:#87ceeb73;}
        .form-login:hover+.login-page-image{opacity: 0.1;}
        .form-login .row{padding:5px 20px;}
        .form-login .row-user-style input{cursor: pointer;}
        .form-login .row-user-style label{cursor: pointer;}
        .form-login .btn-login{    width: 100px;
            height: 30px;
            line-height: 30px;
            background: #4d5653;
            color: white;
            float: right;
            margin-right: 13px;
            margin-top: 20px;
            border: none;
            cursor: pointer;
        }
        #box_login_error{color:red;font-size:14px;}


    </style>
</head>
<body class="body-login">

<!--<div class="website-name">易记</div>-->
<!--<div>轻松管理自己的记忆内容</div>-->
<form class="form-login" action="#" id="form_admin_login">
    <div class="row"><label for="account">账号</label></div>
    <div class="row"><input type="text" name="account" id="account" /></div>
    <div class="row"><label for="">密码</label></div>
    <div class="row"><input type="password" name="password" id="password"/></div>
    <div class="row" id="box_login_error"></div>
    <div class=""><button class="btn-login" type="button" id="btn_login">登录</button></div>
</form>
<img src="/static/image/login_background.jpg" class="login-page-image"/>
<script>

    // if(window !=top){
    //     console.log("current is not top login");
    // }
    $(function() {
        var topObject = $(".wrapper-top");
        console.log("top", topObject);
        if(1 == topObject.length){
            top.location.href=location.href;
        }

        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };


        $("#btn_login").click(function(){
            loginWebSite();
        });

        $("#form_admin_login input").keyup(function (e) {
            if (13 == e.keyCode) {
                loginWebSite();
            }
        });

        function loginWebSite()
        {
            var formData = $("#form_admin_login").serializeObject();
            $.ajax({
                url: '/api/Login/submit',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function (res) {
                    if (1 == res.code) {
                        // localStorage.setItem("login_token", res.data.access_token);
                        window.location.href = "clockin/poem";
                    }else{
                        $("#box_login_error").html(res.message);
                    }
                }
            });
        }

    });
</script>
</body>
</html>
